import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'dart:ui';
import 'package:hovue/common/values/images.dart';
import 'package:hovue/pages/corner/corner_page.dart';
import 'package:hovue/pages/furniture/furniture_page.dart';
import 'package:hovue/pages/home/home_page.dart';
import 'package:hovue/pages/proflie/profile_page.dart';

@RoutePage()
class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    const HomePage(),
    const FurniturePage(),
    const CornerPage(),
    const ProfilePage(),
  ];

  // 导航栏配置
  final List<Map<String, dynamic>> _navItems = [
    {
      'icon': Images.home,
      'selectedIcon': Images.homeSelected,
      'page': const HomePage(),
    },
    {
      'icon': Images.furniture,
      'selectedIcon': Images.furnitureSelected,
      'page': const FurniturePage(),
    },
    {
      'icon': Images.corner,
      'selectedIcon': Images.cornerSelected,
      'page': const CornerPage(),
    },
    {
      'icon': Images.profile,
      'selectedIcon': Images.profileSelected,
      'page': const ProfilePage(),
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          _pages[_currentIndex],

          // 底部自定义导航栏
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 36.w, vertical: 8.h),
              child: SafeArea(
                top: false,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(1000.r),
                  child: BackdropFilter(
                    filter: ImageFilter.blur(
                      sigmaX: 3.0,
                      sigmaY: 3.0,
                    ),
                    child: Container(
                      width: 290.w,
                      height: 70.h,
                      decoration: ShapeDecoration(
                        gradient: const LinearGradient(
                          begin: Alignment(0.50, 0.00),
                          end: Alignment(0.50, 1.00),
                          colors: [Color(0x33AAAAAA), Color(0x33B6B6B6)],
                        ),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(1000.r),
                          side: BorderSide(
                            width: 1,
                            color: Colors.white.withOpacity(0.5),
                          ),
                        ),
                      ),
                      child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: _navItems.map((item) => _buildNavItem(
                        _navItems.indexOf(item),
                        item['icon'],
                        item['selectedIcon'],
                      )).toList(),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildNavItem(int index, String icon, String selectedIcon) {
    final bool isSelected = _currentIndex == index;
    
    return GestureDetector(
      onTap: () {
        setState(() {
          _currentIndex = index;
        });
      },
      child: Container(
        width: 52.w,
        height: 52.w,
        decoration: BoxDecoration(
          color: isSelected ? const Color(0xFFA66645) : Colors.white,
          borderRadius: BorderRadius.circular(26.r),
        ),
        child: Center(
          child: Image.asset(
            isSelected ? selectedIcon : icon,
            width: 28.w,
            height: 28.w,
            color: isSelected ? Colors.white : null,
          ),
        ),
      ),
    );
  }
}
